<template>
	<view class="report-box">
		<scroll-view scroll-y="true" class="report-scroll">
			<view class="report-content">
				<view @click="itemClickAction(index)" :class="['wrap-item', activity(index) ? 'active-item' : '']" v-for="(item, index) in list"
				 :key="index">
					<text :class="[activity(index) ? 'active-text' : '']"> {{item.label}} </text>
				</view>
			</view>
			<view class="img-box">
				<view class="img-title">
					<text>*</text>
					<text class="main-text">图片证据</text>
					<text>（必填）</text>
				</view>
				<view class="image-content">
					<view  class="img-item" v-for="(item, index) in img_list"
					 :key="index">
						<image :src="item"></image>
					</view>
					<view @click="upload_img" class="img-btn">
						<u-icon name="plus" size="46" color="#CED1DD"></u-icon>
					</view>
				</view>
			</view>
			<view class="report-text-box">
				<view class="report-text-title">
					<text class="main-text">投诉内容</text>
					<text>（选填）</text>
				</view>
				<view class="report-textarea-box">
					<textarea class="textarea" ref="text"
					v-model="inputValue" 
					auto-height
					placeholder="请输入具体原因…"
					maxlength="150"/>
				</view>
			</view>
		</scroll-view>
		
		<view @click="reportAction" class="bottom-btn">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request/request.js';
	import { userReport } from '@/api/home/home.js';
	export default {
		data() {
			return {
				inputValue: '',
				selectedIndex: -1,
				img_list:[],
				user_id: "",
				action: request.config.baseUrl + 'user/upload', // 上传地址
				list: [{
						label: "辱骂",
						id: "1"
					},
					{
						label: "欺诈骗钱",
						id: "2"
					},
					{
						label: "广告",
						id: "3"
					},
					{
						label: "色情骚扰",
						id: "4"
					},
					{
						label: "信息造假",
						id: "5"
					},
					{
						label: "感情欺骗",
						id: "6"
					},
					{
						label: "其他",
						id: "7"
					},
				],
				
			}
		},
		onLoad(option) {
			this.user_id = option.user_id || "";
		},
		methods:{
			itemClickAction(index){
				this.selectedIndex = index
			},
			activity(index){
				return index === this.selectedIndex
			},
			upload_img() {
				const that = this
				if(that.img_list.length < 4) {
					uni.chooseImage({
						count: 4 - that.img_list.length,
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths;
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							for(let i=0; i<tempFilePaths.length; i++) {
								uni.uploadFile({
									url: that.action,
									filePath: tempFilePaths[i],
									name: 'file',
									formData: {},
									success: (uploadFileRes) => {
										let list = this.img_list
										console.log(uploadFileRes.data);
										list.push(JSON.parse(uploadFileRes.data).data[0].url)
										that.img_list = list
									},
									complete: function() {
										if(i == tempFilePaths.length-1) {
											uni.hideLoading();
										} 
									},
									fail: function() {
										uni.hideLoading();
									}
								});								
							}
						},
					});
				}
			},
			reportAction(){
				
				if (this.user_id === ""){
					uni.showToast({
						title: '用户id不存在',
						duration: 2000,
						icon:"none"
					});
					return 
				}
				if (this.selectedIndex < 0){
					uni.showToast({
						title: '请选择举报原因',
						icon:"none"
					});
					return 
				}
				if (this.img_list.length === 0){
					uni.showToast({
						title: '请上传图片证据',
						icon:"none"
					});
					return 
				}
				
				let note = this.inputValue || ""
				let tag = this.list[this.selectedIndex].label || ""
				let data = {
					user_id: this.user_id || "",
					tag:tag,
					pic_path: this.img_list.join(";"),
					note: note
				}
				userReport(data).then(res => {
					if (res.status == 1) {
						uni.showToast({
							title: "举报成功",
						})
						setTimeout(function () {
							uni.navigateBack()
						}, 2000);
					} else {
						uni.showToast({
							title: "举报失败",
							icon:"none"
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}
	.report-box {
		display: flex;
		background-color: #FFFFFF;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		.report-scroll{
			display: flex;
			flex-direction: column;
			flex: 1;
			.report-content {
				padding: 50rpx;
				display: flex;
				flex-direction: row;
				width: 100%;
				flex-wrap: wrap;
				.wrap-item {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 10rpx;
					width: 196rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32px;
					border: 2rpx solid #E9EBF0;
					text{
						font-size: 26rpx;
						font-weight: 400;
						color: #474A58;
					}
					
					.active-text {
						color: #FF5998;
					}
			
				}
				.active-item {
					border: 2rpx solid #FF5998;
					
				}
			}
			.img-box{
				display: flex;
				flex-direction: column;
				.img-title{
					padding: 0 32rpx;
					height: 36rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #EF3838;
					line-height: 36rpx;
					.main-text{
						color: #474A58;
					}
				}
				.image-content{
					display: flex;
					flex-direction: row;
					width: 100%;
					flex-wrap: wrap;
					padding: 30rpx 54rpx;
					.img-item {
						width: 148rpx;
						height: 148rpx;
						border-radius: 4rpx;
						margin-right: 20rpx;
						margin-top: 10rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
					.img-btn{
						margin-right: 20rpx;
						margin-top: 10rpx;
						width: 148rpx;
						height: 148rpx;
						border-radius: 4rpx;
						border: 2rpx dashed #CED1DD;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.report-text-box{
				display: flex;
				flex-direction: column;
				padding: 0 54rpx;
				margin-top: 10rpx;
				.report-text-title{
					height: 36rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #9DA2B5;
					line-height: 36rpx;
					.main-text{
						color: #474A58;
					}
				}
				.report-textarea-box{
					margin-top: 14rpx;
					background: #F3F6F8;
					border-radius: 4px;
					padding: 20rpx;;
					.textarea {
						display: flex;
						width: 642rpx;
					}
				}
			}
		}
		.bottom-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 32rpx;
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #FC4F91 0%, #FD6CE6 100%);
			border-radius: 4rpx;
			text{
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>
